<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/vant.min.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="html5plus://ready"></script>
		<script src="../js/listener_other.js"></script>
		<title>个人资料</title>
	</head>
	<body>
		<div id="app">
			<van-row style="background-color:orangered;color: #E5E5E5; height:100px;line-height:46px;padding-top: 4%;">
			  <van-col span="4" offset="1" ><van-icon name="arrow-left" size="20px" style="margin-top: 29px;" @click="onClickLeft"/></van-col>
			  <van-col span="8" offset="4"><h2>个人资料</h2></van-col>
			  
			</van-row>
			<van-row style="margin-top: 5%;">
			  <van-col span="22" offset="1" >
				  <van-cell-group>
				  			<van-cell is-link value="更换头像" @click="showAlert = true" style="padding-top: 15px;" center>
				  				<img :src="imgUrl" style="width: 55px; height: 55px; border: solid 1px lightgray; border-radius: 80%;" slot="title" />
				  			</van-cell>
				  </van-cell-group>
			  </van-col>
			  <van-col span="22" offset="1">
					<van-cell-group style="margin-top: 3%;">
						<van-cell title="昵称" is-link :value="localStorage.getItem('Name')" @click="updateName"></van-cell>
						<van-cell title="手机号码" is-link :value="localStorage.getItem('Phone')" @click="updatePhone"></van-cell>
					</van-cell-group>
			  </van-col>
			  <van-col span="22" offset="1">
					<van-actionsheet v-model="showAlert" :actions="actions" @select="onSelect" @cancel="onCancel" cancel-text="取消"></van-actionsheet>
			  </van-col>
			  
			</van-row>
			
			
			

		</div>
		<script type="text/javascript">
			var vm = new Vue({

				el: "#app",

				data: {
					imgUrl:"",
					
					actions: [{
						id: 1,
						name: '拍照'
					},
					{
						id: 2,
						name: '从相册选取'
					}
				],
				showAlert: false,
				
				userKey: localStorage.getItem("key")
				},
				mounted:function() {
					localStorage.setItem("datas",plus.webview.currentWebview());
					if(localStorage.getItem("key")=="null"){
						alert('您还未登录');
											       
						plus.webview.open("../personcenter/denglu.html");
						plus.webview.close(plus.webview.currentWebview().id);
											     
					}
					this.imgUrl=localStorage.getItem("imgurl");
					
					
				},
				methods: {
					onClickLeft: function() {
						plus.webview.close(plus.webview.currentWebview().id);
					},
					onSelect:function(item) { //修改头像
						if(item.id == 1) {
							var  cmr  =  plus.camera.getCamera();    
							cmr.captureImage(function (p) {         
								plus.io.resolveLocalFileSystemURL(p,  function(entry) {             
									var imgUrl = entry.toLocalURL();
									vm.$dialog.confirm({
										title: '提示',
										message: '您确定上传该图片作为头像吗?'
									}).then(function() {
										var toast = vm.$toast.loading({
											duration: 0,
											forbidClick: true,
											message: '正在上传'
										});
										var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey + "", {
												method: "POST",
												blocksize: 204800,
												priority: 100
											}, //最大上传大小200k,任务优先级100
											function(t, status) {
												//上传成功
												if(status == 200) {
													var responseText = JSON.parse(task.responseText);
													//plus.storage.setItem("imgUrl", responseText.AvatarImage);//头像上传成功重新赋值
						
													
													localStorage.setItem("imgUrl",responseText.AvatarImage); //头像上传成功重新赋值
													localStorage.setItem("userData", JSON.stringify(userData));
													
													toast = vm.$toast.success("上传成功");
													vm.$toast.clear();
													plus.webview
													plus.webview.getWebviewById("personal").reload(false);
													plus.webview.currentWebview().reload(false);
													 //true 设置使用缓存，加快读取速度
													 var datas=plus.webview.getWebviewById(localStorage.getItem("datas").id);
													 datas.reload(true);
												} else { //上传失败
													vm.$toast.fail("上传失败：" + status);
													vm.$toast.clear();
												}
											}
										);
										task.addFile(imgUrl, {
											key: "imgUrl"
										});
										task.start();
										vm.showAlert = false;
									}).catch(function(){
										// on cancel
									});        
								});      
							},  function(e) {}, {
								index: 1,
								filename: "_doc/camera/"
							}); //选择主摄像头，路径保存到_doc/camera/下
							//plus.io.resolveLocalFileSystemURL( url, succesCB, errorCB );//通过url获取 _doc/camera/下的图片
						} else if(item.id == 2) {
							// 从相册中选择图片
							plus.gallery.pick(function(path) {
								//成功选择回调 path是图片路径
								vm.$dialog.confirm({
									title: '提示',
									message: '您确定上传该图片作为头像吗?'
								}).then(function(){
									var toast = vm.$toast.loading({
										duration: 0, // 持续展示 toast
										forbidClick: true, // 禁用背景点击
										message: '正在上传'
									});
									//开始上传任务
									var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey + "", {
											method: "POST",
											blocksize: 204800,
											priority: 100
										}, //最大上传大小200k,任务优先级100
										function(t, status) {
											//上传成功
											if(status == 200) {
												
												var responseText = JSON.parse(task.responseText);
												//plus.storage.setItem("imgUrl",responseText.AvatarImage);//头像上传成功重新赋值
												var userData = JSON.parse(localStorage.getItem("userData"));
												
												vm.$toast.success("上传成功");
												
												plus.webview.currentWebview().reload(true);
												plus.webview.getWebviewById("myslef").reload(true);
											} else { //上传失败
												vm.$toast.fail("上传失败：" + status);
												vm.$toast.clear();
											}
										}
									);
									task.addFile(path, {
										key: "imgUrl"
									});
									task.start();
									vm.showAlert = false;
								}).catch(function(){
									// on cancel
								});
							}, function(e) {
								//选择图片错误回调
								var code = e.code; // 错误编码
								var message = e.message; // 错误描述信息
								vm.$toast.fail(message);
							}, {
								filter: "image"
							}); //filter 默认过滤其他文件，只剩图片
						} else {
							this.$toast.fail("选择了错误的选项!");
						}
					},
				updateName:function() { //修改昵称
					plus.webview.create("../personcenter/updateName.html", "updateName", {}, {
						
					}).show("slide-in-left");
				},
				updatePhone:function() { //修改手机号
					plus.webview.create("../personcenter/updatePhone.html", "updatePhone", {}, {
						
					}).show("slide-in-left");
				},
				returnPage:function() {
					plus.webview.close(plus.webview.currentWebview());
				},
				onCancel:function() { //取消上传
					this.$toast.fail("取消上传");
				}
				
				}
			})
		</script>
	</body>
</html>
